<script setup>
import { ref, watchEffect } from "vue";
import Dialog from "../../../../components/Dialog.vue";
import * as echarts from "echarts";

const props = defineProps(["visible", "title", "thead", "data"]);

const emits = defineEmits(["close"]);

const PieRef = ref(null);
watchEffect(() => {
  if (!PieRef.value) return;
  const chart = echarts.init(PieRef.value);

  const option = {
    tooltip: {
      trigger: "item",
    },

    legend: {
      // bottom: "5%",
      // top:'center',
      bottom: 20,
      itemWidth: 10,
      itemHeight: 10,
      // left: "center",
      textStyle: {
        color: "#fff",
        fontSize: 14,
        rich: {
          value: {
            fontSize: 18, // 设置 value 的字体大小
            fontWeight: "bold", // 设置 value 的字体加粗
            color: "#ffffff", // 设置 value 的字体颜色
          },
        },
      },
      formatter: function (name) {
        const dataItem = option.series[0].data.find(
          (item) => item.name === name
        );
        const value = dataItem ? dataItem.value : 0;
        return `${name}   {value|${value}}`;
      },
    },
    series: [
      {
        // name: "Access From",
        color: ["#297ffe", "#fdde78", "#2ffcf0", "#b46bea", "#93c7fa"],
        type: "pie",
        radius: ["0%", "70%"],
        center: ["50%", "43%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1128.75, name: "财政性教育经费" },
          { value: 284.98, name: "非财政性教育经费" },
        ],
      },
    ],
  };

  chart.setOption(option);
});
</script>

<template>
  <Dialog :visible="props.visible" :title="props.title" @close="emits('close')">
    <div class="box">
      <div class="box_c">
        <div class="box_c_c">
          <div class="text-opacity-c9-65-16">总计：</div>
          <div class="text-gradual-yellow-22 mr-1">1413.73</div>
          <div class="text-opacity-c9-55-12">亿元</div>
        </div>
        <div class="box_c_e" ref="PieRef"></div>
      </div>
      <div class="table">
        <div class="thead">
          <div
            class="td text-c9-65-14"
            v-for="(item, index) in thead"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <div class="tbody">
          <div class="tbody_c" v-for="(item, index) in data" :key="index">
            <div class="td">{{ item.name }}</div>
            <div class="td">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </div>
  </Dialog>
</template>

<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  padding: 20px 60px 26px;
  display: flex;
  gap: 6px;
  .box_c {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // gap: 24px;
    padding-top: 50px;
    .box_c_c {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .box_c_e {
      width: 100%;
      flex: 1;
    }
  }
  .table {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    .thead {
      width: 100%;
      display: flex;
      align-items: center;
    }
    .tbody {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;

      overflow: auto;
      .tbody_c {
        width: 100%;
        height: 40px;
        display: flex;
        flex-shrink: 0;
        font-size: 16px;
        color: #ffffff;
        font-family: "Alibaba PuHuiTi 2.0-65 Medium";
        &:nth-child(2n + 1) {
          background: rgba(255, 255, 255, 0.05);
        }
        &:nth-child(2n) {
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }

    .td {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
